<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="zh-cn">
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="description" content="厚和尚品"/>
    <meta name="keywords" content="厚和尚品"/>
    <title>厚和尚品</title>
    <link rel="apple-touch-icon-precomposed" href=""/>
    <link rel="apple-touch-startup-image" href=""/>
    <link rel="stylesheet" href="mall/css/css.css" th:href="@{/mall/css/css.css}" />
    <link rel="stylesheet" href="mall/lib/swiper/swiper.min.css" th:href="@{/mall/lib/swiper/swiper.min.css}"/>
    <link rel="stylesheet" href="mall/lib/layer/layer_mobile/need/layer.css" th:href="@{/mall/lib/layer/layer_mobile/need/layer.css}"/>
    <script type="text/javascript" src="mall/lib/zpeto/zepto-1.2.0.min.js" th:src="@{/mall/lib/zpeto/zepto-1.2.0.min.js}"></script>
    <script type="text/javascript" src="mall/js/comm.js" th:src="@{/mall/js/comm.js}"></script>
    
    <script type="text/javascript" src="mall/lib/layer/layer_mobile/layer.js" th:src="@{/mall/lib/layer/layer_mobile/layer.js}"></script>
</head>
<body>
<!--swiper-->
<div class="carousel">
    <div class="swiper-container">
        <div class="swiper-wrapper">
           <div class="swiper-slide" th:each="picInfo : ${picList}"><a href="#"><img th:src="@{'/upload-dir/'+${picInfo.productId}+'/' + ${picInfo.imgPath}}" alt=""/></a></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<!--/swiper-->
<div class="g-info">
			<!-- 显示商品的名字 -->
	<div class="title" th:text="${proInfo.productName}">老蜂农天然蜂蜜450g喝出健康</div>
	<div class="price">
	<!-- 显示商品的积分和价格 -->
		<span class="ftx-01" th:text="${proInfo.bonus}">200</span>积分+￥<span
			class="ftx-01" th:text="${proInfo.price}">59</span>
	</div>
	<!-- 显示商品的市场价 -->
	<div class="ftx-01" th:text="'市场价：￥'+${proInfo.marketPrice}">市场价：￥199</div>
</div>
<div style="margin: 0 .3rem">
	<div class="seperator-wrap">
		<hr class="seperator"/>
	</div>
</div>
<div class="adds">
	<div class="mui-flex align-center">
		<div class="cell text-left">运费：免运费</div>
		<div class="cell" th:text="'剩余：'+${proInfo.stockCount - proInfo.soldCount}">剩余123件</div>
		<div class="cell text-right" th:text="'销量：'+${proInfo.soldCount}">销量：123</div>
	</div>
</div>
<div class="seperator-wrap">
	<hr class="seperator"/>
</div>
<div class="tabs">
	<div class="box-hd">
		<div class="mui-flex">
			<div class="cell active">
				<em>商品详情</em>
			</div>
			<!-- <div class="cell active">
				<em>成交记录</em>
			</div> -->
		</div>
	</div>
	<div class="box-bd">
		<div class="bd-bd" style="display:block" th:utext="${proInfo.detail}">商品详情</div>
		<!-- <div class="table-data bd-bd" style="display: block;">
			<div class="table-thead">
				<div class="mui-flex">
					<div class="cell">
						<em>卖家</em>
					</div>
					<div class="cell">
						<em>成交时间</em>
					</div>
					<div class="cell">
						<em>数量</em>
					</div>
				</div>
			</div>
			<div class="table-tbody">
				<div class="mui-flex row">
					<div class="cell">
						<span>张三</span>
					</div>
					<div class="cell">
						<span>09-21 12:23:00</span>
					</div>
					<div class="cell">
						<span>1</span>
					</div>
				</div>
			</div>
		</div> -->
	</div>
</div>
<div class="blank"></div>
<div class="bottom-fxied"
	style="left: 0px; bottom: 0px; width: 100%; display: block;">
	<div class="actionBar">
		<div class="mui-flex bar-inner">
			<div onclick="javacsript:location.href='/main/'"
				class="cell home">
				<img src="mall/img/ico-home-01.png" th:src="@{/mall/img/ico-home-01.png}" alt=""/>
				<p>首页</p>
			</div>
			<div onclick="javacsript:location.href='/main/tocart'" class="cell cart">
				<img src="mall/img/ico-basket-01.png" th:src="@{/mall/img/ico-basket-01.png}" alt="" />
				<p>购物车</p>
			</div>
			<button class="cell add-cart" id="add_car_btn">加入购物车</button>
			<button class="cell buy" id="buy_now_btn">立即购买</button>
		</div>
	</div>
</div>
<div id="buy_now_html" class="modal" style="display: none;">
	<form id="buynowform" method="post" th:action="@{/member/prepay/1}">
	<div class="select-html">
		<div class="summary mui-flex">
			<div class="img cell fixed">
				<img th:src="@{'/upload-dir/'+${proInfo.productId}+'/min/' + ${proInfo.smallImgPath}}" alt=""/>
			</div>
			<div class="main cell">
				<div class="title" th:text="${proInfo.productName}">老蜂农天然蜂蜜450g喝出健康</div>
				<div class="buy-line">
					<span class="ftx-01" th:text="${proInfo.bonus}">200</span>积分+￥<span
						class="ftx-01" th:text="${proInfo.price}">59</span>
				</div>
			</div>
			<img th:src="@{/mall/img/ico-close-01.png}"  alt="" class="close"/>
		</div>
		<div style="margin: 0 .3rem;">
			<div class="seperator-wrap">
				<hr class="seperator" />
			</div>
		</div>
		<div class="body">
			<ul class="items-ul">
				<li>
					<p class="names">规格</p>
					<div class="label">
						<label class="active">标配</label> 
					</div>
				</li>
			</ul>
			<div class="desc mui-flex align-center">
				<div class="titl-box cell">
					<p>购买数量：</p>
					<p class="stock" th:text="'剩余：'+${proInfo.stockCount - proInfo.soldCount}">剩余123件</p>
				</div>
				<div class="mui-number cell fixed">
					<button type="button" class="decrease" ontouchend="numDec(this);">-</button>
					<input type="number" class="quantity" name="count" value="1"
						onchange="keyup(this);" />
					<button type="button" class="increase" ontouchend="numAdd(this);">+</button>
					<input type="hidden" name="" class="quantity_val"/>
				</div>
			</div>
			<input type="hidden" name="productId" th:field="${proInfo.productId}"/>
			<input type="hidden" name="productName" th:field="${proInfo.productName}"/>
			<input type="hidden" name="smallImgPath" th:field="${proInfo.smallImgPath}"/>
			<input type="hidden" name="price" th:field="${proInfo.price}"/>
			<input type="hidden" name="bonus" th:field="${proInfo.bonus}"/>
		</div>
		<div class="next-step" ontouchend="buynow();">下一步</div>
		<script type="text/javascript">
		//直接购买
			function buynow(){
				$('#buynowform').submit();
			}
		</script>
	</div>
	</form>
</div>
<div id="add_car_html" class="modal" style="display: none;">
	<div class="select-html">
		<div class="summary mui-flex">
			<div class="img cell fixed">
				<img th:src="@{'/upload-dir/'+${proInfo.productId}+'/min/' + ${proInfo.smallImgPath}}" alt=""/>
			</div>
			<div class="main cell">
				<div class="title" th:text="${proInfo.productName}">老蜂农天然蜂蜜450g喝出健康</div>
				<div class="buy-line">
					<span class="ftx-01" th:text="${proInfo.bonus}">200</span>积分+￥<span
						class="ftx-01" th:text="${proInfo.price}">59</span>
				</div>
			</div>
			<img th:src="@{/mall/img/ico-close-01.png}" alt="" class="close"/>
		</div>
		<div style="margin: 0 .3rem;">
			<div class="seperator-wrap">
				<hr class="seperator" />
			</div>
		</div>
		<div class="body">
			<ul class="items-ul">
				<li>
					<p class="names">规格</p>
					<div class="label">
						<label class="active">标配</label> 
					</div>
				</li>
			</ul>
			<div style="margin: 0 .3rem;">
				<div class="seperator-wrap">
					<hr class="seperator" />
				</div>
			</div>
			<div class="desc mui-flex align-center">
				<div class="titl-box cell">
					<p>购买数量：</p>
					<p class="stock" th:text="'剩余：'+${proInfo.stockCount - proInfo.soldCount}">剩余123件</p>
				</div>
				<div class="mui-number cell fixed">
					<button type="button" class="decrease" ontouchend="numDec(this);">-</button>
					<input type="number" class="quantity" value="1" id="buy_count"
						onchange="keyup(this);" />
					<button type="button" class="increase" ontouchend="numAdd(this);">+</button>
				</div>
			</div>
		</div>
		<div class="next-step" id="add_car_btn_two">加入购物车</div>
		
	</div>
</div>
<div class="shade"></div>
<script type="text/javascript" src="mall/lib/swiper/swiper.jquery.min.js" th:src="@{/mall/lib/swiper/swiper.jquery.min.js}"></script>
<script th:inline="javascript">
    $(document).ready(function () {
    	
        //swiper
        var mySwiper = new Swiper('.carousel .swiper-container', {
            direction: 'horizontal',
            loop: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            autoplay: 2000,
        });
        //layer 点击立即购买
        $('#buy_now_btn').on('click', function () {
            $('#buy_now_html').show();
            $('.shade').show();
            $('body').css({'overflow':'hidden'});
        });

        $('.select-html .items-ul .label').on('touchend', 'label', function () {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
            } else {
                $(this).addClass('active').siblings().removeClass('active');
            }
        });
        //加入购物车
        $('#add_car_btn').on('click touchend', function () {
            $('#add_car_html').show();
            $('.shade').show();
            $('body').css({'overflow':'hidden'});
            var total_h = $('#add_car_html').height();
            var btn_h = 0.98 * parseInt($('html').css('font-size'));
            var summary_h = 1.5 * parseInt($('html').css('font-size'));
            var h = total_h - btn_h - summary_h + 'px';
            $('.select-html .body').css({'height': h});
        });

        $('.select-html .summary .close').on('click touchend',function(){
            $(this).parents('.modal').hide();
            $('.shade').hide();
            $('body').css({'overflow':'auto'});
        });
		//点击加入购物车按钮则发送ajax请求
        $('#add_car_btn_two').on('touchend',function(){
            var num = $('#buy_count').val();
			console.log(num);
			$.ajax({
				type:'post',
				url:'/main/addCart',
				dataType:'json',
				data:{'productId':[[${proInfo.productId}]],'count':num},
			    success:function(data){
			    	 $('#add_car_btn_two').parents('.modal').hide();
			         $('.shade').hide();
			         $('body').css({'overflow':'auto'});
			    	if(data.result == 'success'){
			    		layer.open({
							content : '已添加至购物车！',
							skin : 'msg',
							time : 2
						//2秒后自动关闭
						});
			    	}
			    },
			    error:function(){
			    	layer.open({
						content : '添加至购物车异常！',
						skin : 'msg',
						time : 2
					//2秒后自动关闭
					});
			    }
			});
        });
    })
</script>
</body>
</html>
